/* 元素内容为空时的样式 */
.box:empty {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  /* dashed:虚线， solid：实线 */
  border: 2px dashed gray;
  margin-bottom: 10px;
}

/* 不包含该属性的样式设置 */
p:not(.exclude) {
  color: red;
}

/* 符合相应选择器的样式 */
/* id选择器的权重大于class选择器的权重 */
/* is取权重最高的选择器的样式，where权重都为0 */
/* :is(#pra, .special) {
  font-weight: bold;
} */

:where(#pra, .special) {
  font-weight: bold;
}

/* is: #pra权重更高，所以不会被覆盖，  where： 权重为0，所以会被覆盖 */
.special {
  font-weight: 400;
}

/* 父元素包含子元素 */
div:has(p) {
  background-color: yellow;
}

/* 不包含 */
div:not(:has(> a)) {
  color: red;
}

/* 第一个子元素(用在子元素上) */
/* ul li:first-child {
  color: blue;
} */

/* 应⽤样式的元素类型 */
/* ul li:first-of-type {
  color: red;
} */

/* 最后一个 */
/* ul li:last-child {
  color: green;
} */

tr:first-child td {
  font-weight: bold;
}

/* section下面所有不同类型下的第一个元素样式 */
section :first-of-type {
  background-color: yellow;
}

/* 作用于子元素上 */
li:nth-child(n + 2) {
  color: blueviolet;
}
/* 父元素下只有唯一一个li才生效 */
/* ul li:only-child {
  color: red;
} */

/* ⽗元素中唯⼀的⼀个特定类型的⼦元素 */
section:only-of-type {
  color: antiquewhite;
}

/* 禁用样式设置 */
input:disabled {
  background: blue;
}
/* 启用状态样式设置 */
input:enabled {
  background: pink;
}

/* 选中之后的样式设置 */
/* input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: green;
} */

/* 默认状态样式（比如默认选中的选项） */
input[type="checkbox"]:default + label {
  font-weight: bold;
  color: green;
}

/* 必填时的样式 */
/* input:required {
  border: 2px solid red;
  background-color: #fff4f4;
} */
/* 只读样式设置 readonly、disabled */
input:read-only {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #666;
}

input:valid {
  border: 2px solid green;
  background-color: #eaffea;
}

/* 常规样式设置 */
/* input:optional {
  border: 2px solid green;
  background-color: #f4fff4;
} */

/* 符合当前范围 */
input[type="number"]:in-range {
  border: 2px solid green;
  background-color: #eaffea;
}

/* 不符合当前样式 */
input[type="number"]:out-of-range {
  border: 2px solid red;
  background-color: red;
}

input[type="date"]:in-range {
  box-shadow: 0 0 5px #5f5;
}
